<template lang="html">
  <div>
    <div class="advertising">
        <div class="title aa" @click="getduanwu(2)" v-if="ifShow && src5 !== ''">
            <img :src="src5" alt="">
        </div>
        <div class="towImg"  v-if="ifShow">
              <div class="" @click="greatGoodsMoreAction($event,2)">
                    <img :src="src3" alt="">
              </div>
              <div class="" @click="goToCustomAdverAction($event,3)">
                  <img :src="src4" alt="">
              </div>
        </div>
        <div class="carousel">
            <img src="../../assets/imgs/dneg.png" class="deng">
          <p>
              回收手机已达1000台+鉴定准确率100%
          </p>
        </div>
    </div>
    <div class="activity_box" v-show="show">
      <div class="content">
          <div class="Time"  v-if="ifShow">
              <div class="timeContent">
                  <div class="timeLogin">
                        <img src="../../assets/imgs/time.png" alt="">
                  </div>
                  <div class="count">
                    <div class="">
                      {{day}}天
                    </div>
                    <span class="colon">:</span>
                      <div class="">
                        {{hr}}
                      </div>
                        <span class="colon">:</span>
                      <div class="">
                        {{min}}
                      </div>
                        <span class="colon">:</span>
                      <div class="sec">
                        {{sec}}
                      </div>
                  </div>
              </div>
          </div>
          <div class="">
              <div class="shou">
                  <div class="bg" ref="bg" :data-id="goodsId"  @click="flashSaleAction($event,1)">
                          <img class="reserve" src="../../assets/imgs/reserve.png" alt="" v-if="Bgreserve"/>
                          <img class="reserve" src="../../assets/imgs/sell.png" alt="" v-if="Bgsell"/>
                  </div>
                  <div class="">
                      <div class="phone bijib" ref="bg1" :data-id="goodsId1" @click="flashSaleAction($event,2)">
                          <img class="reserve ve" src="../../assets/imgs/reserve.png" alt="" v-if="Bg1reserve">
                          <img class="reserve ve" src="../../assets/imgs/sell.png" alt="" v-if="Bg1sell">
                      </div>
                      <div class="bijib bia" ref="bg2" :data-id="goodsId2" @click="flashSaleAction($event,3)">
                          <img class="reserve ve_1" src="../../assets/imgs/reserve.png" alt="" v-if="Bg2reserve">
                          <img class="reserve ve_1" src="../../assets/imgs/sell.png" alt="" v-if="Bg2sell">
                      </div>
                  </div>
              </div>
              <!-- 中间那两个 -->
              <div class="middle">
                  <div class="ipad bijib" ref="bg3" :data-id="goodsId3" @click="flashSaleAction($event,4)">
                      <img class="reserve ve_2" src="../../assets/imgs/reserve.png" alt="" v-if="Bg3reserve">
                      <img class="reserve ve_2" src="../../assets/imgs/sell.png" alt="" v-if="Bg3sell">
                  </div>
                  <div class="gx bijib" ref="bg4" :data-id="goodsId4" @click="flashSaleAction($event,5)">
                      <img class="reserve ve_3" src="../../assets/imgs/reserve.png" alt="" v-if="Bg4reserve">
                      <img class="reserve ve_3" src="../../assets/imgs/sell.png" alt="" v-if="Bg4sell">
                  </div>
              </div>
              <!-- bottom -->
              <div class="bottom">
                  <div class="">
                      <div class="phone" ref="bg5" :data-id="goodsId5" @click="flashSaleAction($event,6)">
                          <img class="reserve ve_5" src="../../assets/imgs/reserve.png" alt="" v-if="Bg5reserve">
                          <img class="reserve ve_5" src="../../assets/imgs/sell.png" alt="" v-if="Bg5sell">
                      </div>
                      <div class="bijib bia" ref="bg6" :data-id="goodsId6" @click="flashSaleAction($event,7)">
                          <img class="reserve ve_1" src="../../assets/imgs/reserve.png" alt="" v-if="Bg6reserve">
                          <img class="reserve ve_1" src="../../assets/imgs/sell.png" alt="" v-if="Bg6sell">
                      </div>
                  </div>
                  <div class="bg" ref="bg7" :data-id="goodsId7" @click="flashSaleAction($event,8)">
                      <img class="reserve" src="../../assets/imgs/reserve.png" alt="" v-if="Bg7reserve">
                      <img class="reserve" src="../../assets/imgs/sell.png" alt="" v-if="Bg7sell">
                  </div>
              </div>
          </div>
      </div>
    </div>
    <div class="title ss" @click="getduanwu(1)" v-if="ifShow">
        <img :src="src6" alt="">
    </div>
    <!-- 精品好物 -->
    <div class="" v-if="ifShow">
        <Boutique/>
    </div>
  </div>
</template>

<script>
import Bigbox from '@/components/bigBox/bigBox.vue'
import Boutique from '@/components/boutique/boutique.vue'
import {
    activityGoodsList,
    getadvertising,
    getIfshow
} from "@/api/goods/goods";
export default {
  components : {
    Bigbox,
    Boutique
  },
  data () {
    return {
      Bgreserve : false,
      Bgsell : false,
      Bg1reserve : false,
      Bg1sell : false,
      Bg2reserve : false,
      Bg2sell : false,
      Bg3reserve : false,
      Bg3sell : false,
      Bg4reserve : false,
      Bg4sell : false,
      Bg5reserve : false,
      Bg5sell : false,
      Bg6reserve : false,
      Bg6sell : false,
      Bg7reserve : false,
      Bg7sell : false,
      day : '',
      hr : '',
      min : '',
      sec : '',
      show : false,
      goodsPicture : '',
      goodsId : '',
      goodsId1 : '',
      goodsId2 : '',
      goodsId3 : '',
      goodsId4 : '',
      goodsId5 : '',
      goodsId6 : '',
      goodsId7 : '',
      locationNum : '',
      activityEndTime : '',
      src5 : '',
      locationNum5 : '',
      src3 : '',
      locationNum3 : '',
      src4 : '',
      locationNum4: '',
      msec :'',
      time : '',
      src6 :'',
      ifShow : true
    }
  },
  mounted () {
      this.getactivityGoodsList();
      this.getLocation();
      this.getifshow();
      console.log(this.src5 == '');
  },
  methods : {
    GetQueryString(name){
       var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
       var r = window.location.search.substr(1).match(reg);
       if(r != null){
         try{
           return decodeURIComponent(r[2]);
         }catch(e){
           return unescape(r[2]);
         }
       }
       return null;
     },
    getifshow () {
      if (this.GetQueryString('version') == '1.0.3') {
         this.ifShow = false;
      } else {
         this.ifShow = true;
      }
    },
    getLocation () {//广告位位置
      var id = 'APP_INDEX_5,APP_INDEX_3,APP_INDEX_4,APP_INDEX_6'
      getadvertising(id).then(res=>{
         if (res.data.code == 'OK') {
            res.data.data.map(item=>{
                switch ( item.locationNum ) {
                  case "APP_INDEX_4" : this.src4 = item.locationImage; this.locationNum4 = item.locationNum;
                  break;
                  case "APP_INDEX_5" : this.src5 = item.locationImage;
                  break;
                  case "APP_INDEX_3" : this.src3 = item.locationImage;
                  break;
                  case "APP_INDEX_6" : this.src6 = item.locationImage;
                  break;
                  default:
                }
            })
         }
      })
    },
    getduanwu (num) {
      if (num == 1) {
        if (this.GetMobelType().android) {
             window.tfb.clickAdBanner('APP_INDEX_6')
        } else {
           window.webkit.messageHandlers.goToCustomAdverAction.postMessage('APP_INDEX_6')
        }
      } else {
        if (this.GetMobelType().android) {
             window.tfb.clickAdBanner('APP_INDEX_5')
        } else {
           window.webkit.messageHandlers.goToCustomAdverAction.postMessage('APP_INDEX_5')
        }
      }
    },
    goToCustomAdverAction () {
      if (this.GetMobelType().android) {
           window.tfb.clickAdBanner('APP_INDEX_4')
      } else {
         window.webkit.messageHandlers.goToCustomAdverAction.postMessage('APP_INDEX_4')
      }
  },
    greatGoodsMoreAction () {//广告位位置3
        if (this.GetMobelType().android) {
               window.tfb.clickAdBanner('APP_INDEX_3')
        } else {
            window.webkit.messageHandlers.goToCustomAdverAction.postMessage('APP_INDEX_3')
        }
    },
    newActivityAction (e,num) {//活动跳页面 暂时没用
       if (this.GetMobelType().android) {
         switch (num) {
           case 1:  window.tfb.navigateToWeb('http://www.baidu.com');
           break;
           case 2:  window.tfb.navigateToWeb('http://www.baidu.com');
           break;
           case 3:  window.tfb.navigateToWeb('http://www.baidu.com');
           break;
           default:
         }
       } else {
         switch (num) {
           case 1:  window.webkit.messageHandlers.newActivityAction.postMessage('http://www.baidu.com');
           break;
           case 2:  window.webkit.messageHandlers.newActivityAction.postMessage('http://www.baidu.com');
           break;
           case 3:  window.webkit.messageHandlers.newActivityAction.postMessage('http://www.baidu.com');
           break;
           default:
         }
       }
    },
    flashSaleAction (e,num) {//限时活动
       if (this.GetMobelType().android) {
         switch (num) {
           case 1:
            window.tfb.navigateToGoodsDetail(this.$refs.bg.dataset.id);
           break;
           case 2:
            window.tfb.navigateToGoodsDetail(this.$refs.bg1.dataset.id);
           break;
           case 3:  window.tfb.navigateToGoodsDetail(this.$refs.bg2.dataset.id);
           break;
           case 4:  window.tfb.navigateToGoodsDetail(this.$refs.bg3.dataset.id);
           break;
           case 5:  window.tfb.navigateToGoodsDetail(this.$refs.bg4.dataset.id);
           break;
           case 6:  window.tfb.navigateToGoodsDetail(this.$refs.bg5.dataset.id);
           break;
           case 7:  window.tfb.navigateToGoodsDetail(this.$refs.bg6.dataset.id);
           break;
           case 8:  window.tfb.navigateToGoodsDetail(this.$refs.bg7.dataset.id);
           break;
           default:
         }
       } else {
        switch (num) {
          case 1:
           window.webkit.messageHandlers.flashSaleAction.postMessage(this.$refs.bg.dataset.id);
          break;
          case 2:
            window.webkit.messageHandlers.flashSaleAction.postMessage(this.$refs.bg1.dataset.id);
          break;
          case 3:  window.webkit.messageHandlers.flashSaleAction.postMessage(this.$refs.bg2.dataset.id);
          break;
          case 4:  window.webkit.messageHandlers.flashSaleAction.postMessage(this.$refs.bg3.dataset.id);
          break;
          case 5:  window.webkit.messageHandlers.flashSaleAction.postMessage(this.$refs.bg4.dataset.id);
          break;
          case 6:  window.webkit.messageHandlers.flashSaleAction.postMessage(this.$refs.bg5.dataset.id);
          break;
          case 7:  window.webkit.messageHandlers.flashSaleAction.postMessage(this.$refs.bg6.dataset.id);
          break;
          case 8:  window.webkit.messageHandlers.flashSaleAction.postMessage(this.$refs.bg7.dataset.id);
          break;
          default:

        }
      }
   },
    getactivityGoodsList (data) {
      activityGoodsList(data).then(res=>{
         if (res.data.code == 'OK') {
            res.data.data.records.map(item=>{
              this.activityEndTime = item.activityEndTime
              this.time = res.data.time
               // this.activityEndTime = +new Date(res.headers.date)
                    // console.log(+new Date(res.headers.date));
              item.activityGoodsVo.map(val=>{
                this.goodsPicture = val.goodsPicture
                if ( val.locationNum == 1 && val.goodsStatus == '3') {
                     this.Bgreserve = true;              //
                } else if (val.locationNum == 1 && val.goodsStatus == '4') {
                    this.Bgsell = true;
                } else if (val.locationNum == 2 && val.goodsStatus == '3') {
                    this.Bg1reserve = true;
                } else if (val.locationNum == 2 && val.goodsStatus == '4') {
                    this.Bg1sell = true;
                } else if (val.locationNum == 3 && val.goodsStatus == '3') {
                    this.Bg2reserve = true;
                } else if (val.locationNum == 3 && val.goodsStatus == '4') {
                    this.Bg2sell = true;
                } else if (val.locationNum == 4 && val.goodsStatus == '3') {
                    this.Bg3reserve = true;
                } else if (val.locationNum == 4 && val.goodsStatus == '4') {
                    this.Bg3sell = true;
                } else if (val.locationNum == 5 && val.goodsStatus == '3') {
                    this.Bg4reserve = true;
                } else if (val.locationNum == 5 && val.goodsStatus == '4') {
                    this.Bg4sell = true;
                } else if (val.locationNum == 6 && val.goodsStatus == '3') {
                    this.Bg5reserve = true;
                } else if (val.locationNum == 6 && val.goodsStatus == '4') {
                    this.Bg5sell = true;
                } else if (val.locationNum == 7 && val.goodsStatus == '3') {
                    this.Bg6reserve = true;
                } else if (val.locationNum == 7 && val.goodsStatus == '4') {
                    this.Bg6sell = true;
                } else if (val.locationNum == 8 && val.goodsStatus == '3') {
                    this.Bg7reserve = true;
                } else if (val.locationNum == 8 && val.goodsStatus == '4') {
                  this.Bg7sell = true;
                }

                   switch ( val.locationNum ) {
                     case 1: this.$refs.bg.style.backgroundImage = "url("+val.goodsPicture+")";
                             this.goodsId = val.goodsId;

                     break;
                     case 2: this.$refs.bg1.style.backgroundImage = "url("+val.goodsPicture+")"
                             this.goodsId1 = val.goodsId
                     break;
                     case 3: this.$refs.bg2.style.backgroundImage = "url("+val.goodsPicture+")"
                           this.goodsId2 = val.goodsId
                     break;
                     case 4: this.$refs.bg3.style.backgroundImage = "url("+val.goodsPicture+")"
                             this.goodsId3 = val.goodsId
                     break;
                     case 5: this.$refs.bg4.style.backgroundImage = "url("+val.goodsPicture+")"
                             this.goodsId4 = val.goodsId
                     break;
                     case 6: this.$refs.bg5.style.backgroundImage = "url("+val.goodsPicture+")"
                             this.goodsId5 = val.goodsId
                     break;
                     case 7: this.$refs.bg6.style.backgroundImage = "url("+val.goodsPicture+")"
                             this.goodsId6 = val.goodsId
                     break;
                     case 8: this.$refs.bg7.style.backgroundImage = "url("+val.goodsPicture+")"
                             this.goodsId7 = val.goodsId
                     break;
                     default:
                   }

                return val;
              })
            })
          this.GetRTime();
         }
      })
    },
    GetRTime () {
            const end = this.activityEndTime
            // const now = Date.parse(new Date())
            const now = this.time;
            this.msec = (end - now) / 1000;
            var t = setInterval (()=> {
              this.msec--
              this.day = parseInt(this.msec / 60 / 60 / 24)
              this.hr = parseInt(this.msec / 60 / 60 % 24)
              this.min = parseInt(this.msec / 60 % 60)
              this.sec = parseInt(this.msec % 60)
              // 个位数前补零
               this.hr = this.hr > 9 ? this.hr : '0' + this.hr;
               this.min = this.min > 9 ? this.min : '0' + this.min;
               this.sec = this.sec > 9 ? this.sec : '0' + this.sec;
               if (this.msec == 0 ) {
                 clearInterval(t)
                  window.location.reload()
                 this.show = false;
                  if (this.GetMobelType().android) {
                       // window.tfb.refreshHomeActivity('http://132.232.122.151:10444/tfbactivity/flash-sale2090508/index.html');
                      // window.tfb.refreshHomeActivity('http://activity.tuofub.com/flash-sale2090509/index.html')
                  } else {
                     window.webkit.messageHandlers.reloadBottomWebViewAction.postMessage('');
                      // window.webkit.messageHandlers.reloadBottomWebViewAction.postMessage('http://activity.tuofub.com/flash-sale2090509/index.html');
                  }
               }
            },1000)
            if (this.msec > 0) {
              this.show = true;
            }
      },
      GetMobelType ()  {
          var  browser  =   {
            versions:   function()  {
                var  u  =  window.navigator.userAgent;
                return  {
                    trident:  u.indexOf('Trident')  >  -1, //IE内核
                    presto:  u.indexOf('Presto')  >  -1, //opera内核
                    Alipay:  u.indexOf('Alipay')  >  -1, //支付宝
                    webKit:  u.indexOf('AppleWebKit')  >  -1, //苹果、谷歌内核
                    gecko:  u.indexOf('Gecko')  >  -1  &&  u.indexOf('KHTML')  ==  -1, //火狐内核
                    mobile:  !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios:  !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android:  u.indexOf('Android')  >  -1  ||  u.indexOf('Linux')  >  -1, //android终端或者uc浏览器
                    iPhone:  u.indexOf('iPhone')  >  -1  ||  u.indexOf('Mac')  >  -1, //是否为iPhone或者安卓QQ浏览器
                    //iPhone: u.match(/iphone|ipod|ipad/),//
                    iPad:  u.indexOf('iPad')  >  -1, //是否为iPad
                    webApp:  u.indexOf('Safari')  ==  -1, //是否为web应用程序，没有头部与底部
                    weixin:  u.indexOf('MicroMessenger')  >  -1, //是否为微信浏览器
                    qq: u.match(/\sQQ/i) !== null, //是否QQ
                    Safari:  u.indexOf('Safari')  >  -1,
                      ///Safari浏览器,
                };
            }()
          };
          return  browser.versions;
      }
  }
}
</script>

<style scoped>
  .title {
    width: 100%;
    height: 1.84rem;
    display: flex;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .title img {
    width: 100%;
    height: 1.84rem;
  }
  .content {
    padding-left:0.24rem;
    padding-right:0.28rem;
    box-sizing: border-box;
  }
  .towImg {
    height: 1.8rem;
    display: flex;
    justify-content: space-between;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .towImg div {
    width: 3.44rem;
    height: 100%;
    display: flex;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .towImg div img {
      width: 100%;
  }
  .carousel {
    margin-top: 0.36rem;
    width: 100%;
    height: 0.64rem;
    line-height: 0.64rem;
    text-align: center;
    font-size: 0.24rem;
    color:rgba(51,51,51,1);
    box-shadow:0px 0px 10px 0px rgba(230,230,230,1);
    position: relative;
  }
  .Time {
    width: 100%;
    height: 1.1rem;
    display: flex;
    justify-content:center;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .timeContent {
    display: flex;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .timeLogin img {
    width: 2.13rem;
  }
  .count {
      display: flex;
      align-items: center;
      font-size: 0.24rem;
      /* color: #fff; */
      text-align: center;
      margin-left: 0.12rem;
      display: -moz-box;  /* Firefox */
      display: -ms-flexbox;    /* IE10 */
      display: -webkit-box;    /* Safari */
      display: -webkit-flex;    /* Chrome, WebKit */
      display: box;
      display: flexbox;
  }
  .count div {
    width: 0.45rem;
    height: 0.45rem;
    background:rgba(244,95,71,1);
    border-radius: 0.06rem;
    line-height: 0.45rem;
    color: #fff;
  }
  .count div:nth-child(2) {
    margin: 0 0.26rem;
  }
  .shou {
    display: flex;
    justify-content: space-between;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  .shou img {
    /* width: 1.26rem; */
      width: 0.90rem;
    /* height: 1.12rem; */
  }
  .phone{
    width: 3.42rem;
    height: 2.22rem;
    /* background: url('../../assets/imgs/phone.png'); */
    background-size:contain;
    -webkit-background-size: 100% auto;
    position: relative;
  }
  .bijib {
    position: relative;
    width: 3.42rem;
    height: 2.22rem;
    /* background: url() no-repeat; */
    background-size:contain;
    -webkit-background-size: 100% auto;
  }
  .middle {
    display: flex;
    justify-content: space-between;
    margin-top: 0.15rem;
    display: -moz-box;  /* Firefox */
    display: -ms-flexbox;    /* IE10 */
    display: -webkit-box;    /* Safari */
    display: -webkit-flex;    /* Chrome, WebKit */
    display: box;
    display: flexbox;
  }
  /* .middle div {
    width: 3.42rem;
    height: 2.22rem;
    background: url('http://rhbycloud-img.test.upcdn.net/oss/2019/05/08/e7251da39ac046969aef8a571e79e118.png');
        background-size:contain;
  } */
  .gx {
    width: 3.42rem;
    height: 2.22rem;
    background-size:contain;
     -webkit-background-size: 100% auto;
  }
  .bottom {
      margin-top: 0.17rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.30rem;
      display: -moz-box;  /* Firefox */
      display: -ms-flexbox;    /* IE10 */
      display: -webkit-box;    /* Safari */
      display: -webkit-flex;    /* Chrome, WebKit */
      display: box;
      display: flexbox;
  }
  .deng {
    position: absolute;
    width: 0.3rem;
    height: 0.37rem;
    left:0.22rem;
    top:0.16rem;
    /* bottom:0.46rem; */
  }
  .colon {
    width:0.07rem;
    height:0.02rem;
    font-size:0.39rem;
    font-family:PingFang-SC-Bold;
    font-weight:bold;
    color:rgba(244,95,71,1);
    line-height:0;
    margin: 0 0.09rem;
  }
  .activity_box {
    /* display: none; */
  }
  .advertising {
    padding-left:0.24rem;
    padding-right:0.28rem;
    box-sizing: border-box;
  }
  .bg {
    width: 3.44rem;
    height: 4.61rem;
    background-size:contain;
    -webkit-background-size: 100% auto;
    position: relative;
    /* background: url() no-repeat; */
  }
  .bia {
    margin-top: 0.18rem;
  }
  .reserve {
    width: 0.90rem;
    /* height: 0.0rem; */
  }
  .ve {
    position: absolute;
    top: 0.70rem;
    left: 0.2540rem;
  }
  .ve_1 {
    position: absolute;
    top: 0.80rem;
    right: 0.27rem;
  }
  .ve_2 {
    position: absolute;
    top: 0.60rem;
    left: 0.25rem;
  }
  .ve_3 {
    position: absolute;
    top: 0.80rem;
    right: 0.18rem;
  }
  .ss {
    padding-left: 0.24rem;
    padding-right: 0.28rem;
    box-sizing: border-box;
    float: left;
    margin-bottom: 0.16rem;
  }
  .aa {
    margin-bottom: 0.20rem;
  }
  .ve_5 {
    position: absolute;
    top: 0.90rem;
  left: 0.15rem;
  }


</style>
